<!-- 首页 -->
<template>
	<view class="mask">
		<div class="nav"></div>
		<div class="one">
			<div class="left">
				<div class="list" v-for="item,index in arr" :key="index">
					<div class="li" @click="add(index)">
						<text :class="myindex==index?'text':''">{{item}}</text>
						<div :class="myindex==index?'active':''"></div>
					</div>
				</div>
			</div>
			<image class="right" @click="img" src="../../static/diImage/搜索.png" mode=""></image>
		</div>
		<div class="two">
			<Schedule v-show="schedule"></Schedule>
			<Board v-show="board"></Board>
			<Agency v-show="agency"></Agency>
			<State v-show="state"></State>
		</div>
		<div class="three">
			<image src="../../static/diImage/加.png" mode="" @click="jia"></image>
		</div>
		
	</view>
</template>

<script>
	import Board from '../di/board/board.vue'
	import State from '../di/state/state.vue'
	import Agency from '../di/agency/agency.vue'
	import Schedule from '../di/schedule/schedule.vue'
	export default {
		data() {
			return {
				arr:['今日日程','数据看板','代办事项','工作状态'],
				myindex:0,
				schedule:true,
				board:false,
				agency:false,
				state:false
			}
		},
		components:{Board,State, Agency,Schedule   },
		methods: {
			add(index){
				this.myindex=index//导航高亮
				
				//切换导航后的内容
				if(this.myindex==0){
					this.schedule=true
					this.board=false
					this.agency=false
					this.state=false
				}
				if(this.myindex==1){
					this.schedule=false
					this.board=true
					this.agency=false
					this.state=false
				}
				if(this.myindex==2){
					this.schedule=false
					this.board=false
					this.agency=true
					this.state=false
				}
				if(this.myindex==3){
					this.schedule=false
					this.board=false
					this.agency=false
					this.state=true
				}
				
			},
			img(){
				uni.navigateTo({
					url:'/pages/di/sou/sou'//跳转到搜索页
				})
			},
			jia(){
				uni.reLaunch({
					url:'/pages/di/list/list'
				})
			}
			
		},
		
	}
</script >

<style lang="scss" scoped>
.nav{
	height: 30px;
}
.mask{
	width: 100%;
	padding:0 10px;
	background-color: #fafafa;
	.one{
		width: 100%;
		height: 50px;
		display: flex;
		align-items: center;
		.left{
			width: calc(100% - 50rpx);
			height: 100%;
			display: flex;
			justify-content: space-between;
			.li{
				height: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-evenly;
				text{
					color: #999999;
					font-weight: 600;
				}
				.active{
					width: 40px;
					height: 4px;
					background-color: #3478f7;
					border-radius: 2px;
				}
				.text{
					color: black;
				}
			}
		}
		.right{
			width: 50rpx;
			height: 50rpx;
			margin-left: 10px;
			margin-top: -7px;
		}
		
	}
	.two{
		width: 100%;
		height: calc(100vh - 80px);
		overflow: auto;
		border-radius: 10px;
		// border: 1px solid gainsboro;
		background-color: white;
	}
	.three{
		width: 60px;
		height: 60px;
		background-color: #3478f7;
		border-radius: 50%;
		position: fixed;
		left: 81%;
		top: 86%;
		display: flex;
		justify-content: center;
		align-items: center;
		image{
			width: 30px;
			height: 30px;
		}
	}
}

</style>
